<template>
  <div class="suggest">
    <scroll class="scroll">
      <ul class="suggest-list">
        <li v-for="item in searchList" class="suggest-item">
          <p @click="play(item)" class="text">{{`${item.name}-${item.singer}`}}</p>
        </li>
      </ul>
    </scroll>
  </div>
</template>

<script>
import musiclist from '../base/musiclist'
import { mapActions, mapGetters, mapMutations } from 'vuex'
import { copyArr } from '../../common/js/index'
import scroll from '../base/scroll'
export default {
  props: {
    query: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      searchList: []
    }
  },
  computed: {
    ...mapGetters(['sequenceList'])
  },
  methods: {
    ...mapActions({
      selectPlay: 'selectPlay'
    }),
    search() {
      if (!this.query) {
        return
      }
      this.axios
        .get(
          'https://api.bzqll.com/music/tencent/search?key=579621905&limit=100&offset=0&type=song',
          {
            params: { s: this.query }
          }
        )
        .then(res => {
          if (res.data.code == 200) {
            console.log(res)
            let list = res.data.data
            let songlist = []
            list.forEach(element => {
              songlist.push({
                album: '',
                duration: element.time,
                img: `https://api.bzqll.com/music/tencent/pic?id=${
                  element.id
                }&key=579621905`,
                mid: element.id,
                name: element.name,
                singer: element.singer,
                url: `https://api.bzqll.com/music/tencent/url?key=579621905&id=${
                  element.id
                }&br=192`,
                id: Math.floor(Math.random() * 1000000000)
              })
            })
            this.searchList = songlist
          }
        })
    },
    play(item) {
      let arr = copyArr(this.sequenceList)
      arr.push(item)
      let index = arr.length - 1
      this.selectPlay({ list: arr, index })
      this.$emit('clearn')
    }
  },
  watch: {
    query() {
      this.search()
    }
  },
  components: {
    scroll
  }
}
</script>

<style lang="scss" >
.suggest {
  position: fixed;
  width: 100%;
  top:125px;
  bottom: 0;

  .scroll {
      margin:0  20px;
      border-radius: 5px;
      height: 100%;
      overflow: hidden;
    .suggest-list {

        background: #333;

      .suggest-item {
        padding: 0 45px;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        white-space: nowrap;

      }
    }
  }
}
</style>
